<template>
  <div>
    <div class="inputStr">
      <el-input v-model="pagination.queryContent" style="width: 150px" clearable placeholder="请输入姓名"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin: 15px" @click="queryStr">搜索</el-button>
    </div>

    <div v-loading="loading">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="真实姓名">
                <el-tag type="warning" v-html="props.row.realName"></el-tag>
              </el-form-item>
              <el-form-item label="登录名">
                <el-tag type="warning" v-html="props.row.username"></el-tag>
              </el-form-item>
              <el-form-item label="性别">
                <el-tag type="warning" v-html="props.row.sex == 0 ? '男' : props.row.sex == 1 ? '女' : '保密'"></el-tag>
              </el-form-item>
              <el-form-item label="账号状态">
                <el-tag :type="props.row.status == 1 ? 'danger' : 'warning'"
                        v-html="props.row.status == 1 ? '禁用' : '正常' "></el-tag>
              </el-form-item>
              <el-form-item label="上次登录">
                <el-tag type="warning" v-html="props.row.updateTime"></el-tag>
              </el-form-item>
              <el-form-item label="备注">
                <el-tag v-html="props.row.remark"></el-tag>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="真实姓名"
            align="center"
            prop="realName">
        </el-table-column>
        <el-table-column
            label="手机号"
            align="center"
            prop="phoneNumber">
        </el-table-column>
        <el-table-column
            label="地区"
            align="center"
            prop="region">
        </el-table-column>
        <el-table-column
            fixed="right"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showNote(scope.row.id,scope.row.remark)">备注</el-button>
            <el-button :type="scope.row.status==0?'success':'info'" @click="updateStatus(scope.row.id)" plain><span
                v-html="scope.row.status==0?'封禁':'解封'"></span></el-button>
            <el-button type="danger" @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding-top: 40px">
      <el-pagination
          class="pagiantion"
          :total="total"
          @current-change="handleSelectionChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>


    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>

      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="remark">
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateRemark">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserList",
  data() {
    return {
      tableData: [],
      total: 0,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        queryContent: ""
      },
      remark: "",   //备注内容
      userId: null, //选中的用户Id
      centerDialogVisible: false,  //备注弹出
      loading: false           //加载动画
    }
  },
  mounted() {
    this.findPage();
  },
  methods: {
    updateStatus(id) {
      this.$confirm('确定执行此操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.put("/user/updateStatus?id=" + id).then(resp => {
          if (resp.data.statusCode == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            });
            this.findPage();
          }
        })
      }).catch(() => {

      });
    },
    deleteById(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.delete("/user/deleteById?id=" + id).then(resp => {
          if (resp.data.statusCode == 200) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            });
            this.findPage();
          }
        })
      }).catch(() => {

      });
    },
    updateRemark() {
      this.loading = true;
      this.axios.put("/user/updateRemark/" + this.userId + "/" + this.remark).then(resp => {
        if (resp.data.statusCode == 200) {
          this.loading = false;
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
        }
        this.centerDialogVisible = false;
        this.findPage();
      })
    },
    showNote(id, remark) {
      this.remark = remark;
      this.userId = id;
      this.centerDialogVisible = true;
    },
    queryStr() {
      this.findPage();
    },
    handleSelectionChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage();
    },
    findPage() {
      this.loading = true;
      this.axios.post("/user/findPage", this.pagination).then(resp => {
        if (resp.data.statusCode == 200) {
          this.total = resp.data.data.total;
          //this.pagination.toal = resp.data.data.total;
          this.tableData = resp.data.data.data;
        }
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped>
.inputStr {
  width: 280px;
  margin-left: 700px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
